﻿<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. -->

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">

    <title>Component PeoplePicker</title>

    <link rel="stylesheet" href="stylesheets/fabric.min.css">
    <link rel="stylesheet" href="components/PeoplePicker/PeoplePicker.min.css">

    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery.fabric.min.js"></script>
    <script type="text/javascript" src="components/PeoplePicker/Jquery.PeoplePicker.js"></script>
    <!--<script type="text/javascript" src="PeoplePicker.js"></script>-->
    <script type="text/javascript">
    $(document).ready(function() {
      // File Picker demo fixes
      if ($('.ms-FilePicker').length > 0) {
        $('.ms-FilePicker').css({
          "position": "absolute !important"
        });

        $('.ms-PeoplePicker').FilePicker();
      } else {
        if ($.fn.PeoplePicker) {
          $('.ms-PeoplePicker').PeoplePicker();
        }
      }

      if(fabric && fabric['PeoplePicker']) {
        var component, componentHolder;
        componentHolder = document.querySelector('.component-holder');

        if (componentHolder) {
          component = new fabric.Spinner(componentHolder);
        }
      }
    });
    </script>

    <!-- Styles specifically for this page, not required for proper display on components  -->
    <style type="text/css">
        body {
            margin: auto 20px;
        }

        h1 {
            padding: 8px;
        }

        #componentWrapper {
            width: 100%;
            height: 100%;
        }

        .sample-wrapper {
            margin: 20px;
        }

        .ms-PeoplePicker.is-open {
            position: relative;
            margin-bottom: 10px;
        }

        .ms-Dialog {
            position: relative;
            margin-bottom: 10px;
        }

        .ms-NavBar-item .ms-PeoplePicker {
            position: absolute;
        }

        .ms-PeoplePicker .ms-PeoplePicker {
            position: absolute;
        }
    </style>
</head>

<body>
    <h1 class="ms-font-su ms-fontColor-white ms-bgColor-themeDarker">PeoplePicker</h1>
    <div id="componentWrapper">

        <!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. -->
        <div class="ms-PeoplePicker">
            <div class="ms-PeoplePicker-searchBox">
                <input class="ms-PeoplePicker-searchField" type="text">
            </div>
            <div class="ms-PeoplePicker-results">
                <div class="ms-PeoplePicker-resultGroups">
                    <div class="ms-PeoplePicker-resultGroup">
                        <div class="ms-PeoplePicker-resultGroupTitle">Top results</div>
                        <ul class="ms-PeoplePicker-resultList">
                            <li class="ms-PeoplePicker-result">
                                <button class="ms-PeoplePicker-resultBtn">
                                    <div class="ms-Persona">
                                        <div class="ms-Persona-imageArea">
                                            <i class="ms-Persona-placeholder ms-Icon ms-Icon--person"></i>
                                            <img class="ms-Persona-image" src="../src/components/persona/Persona.Person2.png"><div class="ms-Persona-presence"></div>
                                        </div>
                                        <div class="ms-Persona-details">
                                            <div class="ms-Persona-primaryText">Russel Miller</div>
                                            <div class="ms-Persona-secondaryText">Sales</div>
                                        </div>
                                    </div>
                                    <button class="ms-PeoplePicker-resultAction js-resultRemove"><i class="ms-Icon ms-Icon--x"></i></button>
                                </button>
                            </li>
                            <li class="ms-PeoplePicker-result">
                                <button class="ms-PeoplePicker-resultBtn">
                                    <div class="ms-Persona">
                                        <div class="ms-Persona-imageArea">
                                            <i class="ms-Persona-placeholder ms-Icon ms-Icon--person"></i>
                                            <img class="ms-Persona-image" src="../src/components/persona/Persona.Person2.png"><div class="ms-Persona-presence"></div>
                                        </div>
                                        <div class="ms-Persona-details">
                                            <div class="ms-Persona-primaryText">Douglas Fielder</div>
                                            <div class="ms-Persona-secondaryText">Public Relations</div>
                                        </div>
                                    </div>
                                    <button class="ms-PeoplePicker-resultAction js-resultRemove"><i class="ms-Icon ms-Icon--x"></i></button>
                                </button>
                            </li>
                        </ul>
                    </div>
                    <div class="ms-PeoplePicker-resultGroup">
                        <div class="ms-PeoplePicker-resultGroupTitle">Other results</div>
                        <ul class="ms-PeoplePicker-resultList">
                            <li class="ms-PeoplePicker-result">
                                <button class="ms-PeoplePicker-resultBtn">
                                    <div class="ms-Persona">
                                        <div class="ms-Persona-imageArea">
                                            <i class="ms-Persona-placeholder ms-Icon ms-Icon--person"></i>
                                            <img class="ms-Persona-image" src="../src/components/persona/Persona.Person2.png"><div class="ms-Persona-presence"></div>
                                        </div>
                                        <div class="ms-Persona-details">
                                            <div class="ms-Persona-primaryText">Russel Miller</div>
                                            <div class="ms-Persona-secondaryText">Sales</div>
                                        </div>
                                    </div>
                                    <button class="ms-PeoplePicker-resultAction js-resultRemove"><i class="ms-Icon ms-Icon--x"></i></button>
                                </button>
                            </li>
                            <li class="ms-PeoplePicker-result">
                                <button class="ms-PeoplePicker-resultBtn">
                                    <div class="ms-Persona">
                                        <div class="ms-Persona-imageArea">
                                            <i class="ms-Persona-placeholder ms-Icon ms-Icon--person"></i>
                                            <img class="ms-Persona-image" src="../src/components/persona/Persona.Person2.png"><div class="ms-Persona-presence"></div>
                                        </div>
                                        <div class="ms-Persona-details">
                                            <div class="ms-Persona-primaryText">Douglas Fielder</div>
                                            <div class="ms-Persona-secondaryText">Public Relations</div>
                                        </div>
                                    </div>
                                    <button class="ms-PeoplePicker-resultAction js-resultRemove"><i class="ms-Icon ms-Icon--x"></i></button>
                                </button>
                            </li>
                            <li class="ms-PeoplePicker-result">
                                <button class="ms-PeoplePicker-resultBtn">
                                    <div class="ms-Persona">
                                        <div class="ms-Persona-imageArea">
                                            <i class="ms-Persona-placeholder ms-Icon ms-Icon--person"></i>
                                            <img class="ms-Persona-image" src="../src/components/persona/Persona.Person2.png"><div class="ms-Persona-presence"></div>
                                        </div>
                                        <div class="ms-Persona-details">
                                            <div class="ms-Persona-primaryText">Grant Steel</div>
                                            <div class="ms-Persona-secondaryText">Technical Support</div>
                                        </div>
                                    </div>
                                    <button class="ms-PeoplePicker-resultAction js-resultExpand"><i class="ms-Icon ms-Icon--chevronsDown"></i></button>
                                </button>
                                <div class="ms-PeoplePicker-resultAdditionalContent">
                                    <ul class="ms-PeoplePicker-resultList">
                                        <li class="ms-PeoplePicker-result">
                                            <button class="ms-PeoplePicker-resultBtn">
                                                <div class="ms-Persona">
                                                    <div class="ms-Persona-imageArea">
                                                        <i class="ms-Persona-placeholder ms-Icon ms-Icon--person"></i>
                                                        <img class="ms-Persona-image" src="../src/components/persona/Persona.Person2.png">                                      <div class="ms-Persona-presence"></div>
                                                    </div>
                                                    <div class="ms-Persona-details">
                                                        <div class="ms-Persona-primaryText">Bill B. (billb)</div>
                                                        <div class="ms-Persona-secondaryText">Public Relations</div>
                                                    </div>
                                                </div>
                                                <button class="ms-PeoplePicker-resultAction js-resultRemove"><i class="ms-Icon ms-Icon--x"></i></button>
                                            </button>
                                        </li>
                                        <li class="ms-PeoplePicker-result">
                                            <button class="ms-PeoplePicker-resultBtn">
                                                <div class="ms-Persona">
                                                    <div class="ms-Persona-imageArea">
                                                        <i class="ms-Persona-placeholder ms-Icon ms-Icon--person"></i>
                                                        <img class="ms-Persona-image" src="../src/components/persona/Persona.Person2.png">                                      <div class="ms-Persona-presence"></div>
                                                    </div>
                                                    <div class="ms-Persona-details">
                                                        <div class="ms-Persona-primaryText">Grant Steel (bask)</div>
                                                        <div class="ms-Persona-secondaryText">Public Relations</div>
                                                    </div>
                                                </div>
                                                <button class="ms-PeoplePicker-resultAction js-resultRemove"><i class="ms-Icon ms-Icon--x"></i></button>
                                            </button>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li class="ms-PeoplePicker-result">
                                <button class="ms-PeoplePicker-resultBtn">
                                    <div class="ms-Persona">
                                        <div class="ms-Persona-imageArea">
                                            <i class="ms-Persona-placeholder ms-Icon ms-Icon--person"></i>
                                            <img class="ms-Persona-image" src="../src/components/persona/Persona.Person2.png"><div class="ms-Persona-presence"></div>
                                        </div>
                                        <div class="ms-Persona-details">
                                            <div class="ms-Persona-primaryText">Harvey Wallin</div>
                                            <div class="ms-Persona-secondaryText">Delivery</div>
                                        </div>
                                    </div>
                                    <button class="ms-PeoplePicker-resultAction js-resultRemove"><i class="ms-Icon ms-Icon--x"></i></button>
                                </button>
                            </li>
                            <li class="ms-PeoplePicker-result">
                                <button class="ms-PeoplePicker-resultBtn">
                                    <div class="ms-Persona">
                                        <div class="ms-Persona-imageArea">
                                            <i class="ms-Persona-placeholder ms-Icon ms-Icon--person"></i>
                                            <img class="ms-Persona-image" src="../src/components/persona/Persona.Person2.png"><div class="ms-Persona-presence"></div>
                                        </div>
                                        <div class="ms-Persona-details">
                                            <div class="ms-Persona-primaryText">Marcus Lauer</div>
                                            <div class="ms-Persona-secondaryText">Marketing</div>
                                        </div>
                                    </div>
                                    <button class="ms-PeoplePicker-resultAction js-resultRemove"><i class="ms-Icon ms-Icon--x"></i></button>
                                </button>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="ms-PeoplePicker-searchMore js-searchMore">
                    <button class="ms-PeoplePicker-searchMoreBtn">
                        <div class="ms-PeoplePicker-searchMoreIcon">
                            <i class="ms-Icon ms-Icon--search"></i>
                        </div>
                        <div class="ms-PeoplePicker-searchMoreSecondary">Showing top 5 results</div>
                        <div class="ms-PeoplePicker-searchMorePrimary">Search Contacts &amp; Directory</div>
                    </button>
                </div>
            </div>
        </div>


    </div>
</body>
</html>
